import screenfull from 'screenfull'
import { message } from 'antd'
import { useEffect, useState } from 'react'

const Fullscreen = () => {
  const [fullScreen, setFullScreen] = useState<boolean>(screenfull.isFullscreen)
  useEffect(() => {
    screenfull.on('change', () => {
      if (screenfull.isFullscreen) {
        setFullScreen(true)
      } else {
        setFullScreen(false)
      }
      return () => screenfull.off('change', () => {})
    })
    }, [])
    const handleFullScreen = () => {
      if (!screenfull.isEnabled) {
        message.warning('当前浏览器不支持全屏')
      }
      screenfull.toggle()
    }
    return (
      <i className={['icon-style iconfont', fullScreen ? 'icon-suoxiao' : 'icon-quanping'].join("")} onClick={handleFullScreen} />
    )
  }

  export default Fullscreen